<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            font-size: 100px;
            margin-left: 30px;
        }
    </style>
</head>
<script src="./jquery-3.2.1.min.js"></script>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script>
        $(function(){
            var sx_wjx = '★';
            var kx_wjx = '☆';
            $('.comment>li').on('mouseenter', function () {
                $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
            }).on('mouseleave', function (){
                $('.comment>li').text(kx_wjx);
                $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
            }).on('click', function () {
                $(this).attr('clickCurrent', 'current').siblings().removeAttr('clickCurrent');
            });
        });
    </script>
</body>
</html>